<template>
	
	<!-- <view class="all">
		<view class="list list1">
			<view class="list_left">
				<view class="bigs">5</view>
				<view class="smalls">满100元可用</view>
			</view>
			<view class="list_con">
				<view class="titles">优惠抵用券优惠抵用券</view>
				<view class="times">2019-08-09到期</view>
				<view class="times">仅用于精品男装</view>
			</view>
			<view class="list_right">
				<image class="shiyong" src="../../static/lijishiyong.png"></image>
				<view class="riqi">6天后过期</view>
			</view>
		</view>
		<view class="list list2">
			<view class="list_left">
				<view class="bigs">5</view>
				<view class="smalls">满100元可用</view>
			</view>
			<view class="list_con">
				<view class="titles">优惠抵用券优惠抵用券</view>
				<view class="times">2019-08-09到期</view>
				<view class="times">仅用于精品男装</view>
			</view>
			<view class="list_right">
				<image class="shiyong" src="../../static/lijishiyong.png"></image>
				<view class="riqi">6天后过期</view>
			</view>
		</view>
	</view> -->
	
	<view class="all">
		<view class="top">
			<view class="topa">
				<view class="top_title">优惠券</view>
				<view class="price">￥<text class="pricea">{{score}}</text></view>
				<!-- <view class="btns">
					<view class="btnsa" @click="navTo()">充值</view>
					<view class="btnsb" @click="navTo2()">提现</view>
				</view> -->
			</view>
		</view>
		<view class="mingXi">
			<view class="mx_title">
				<image class="mx_tit_img" src="../../static/yuanquan.png"></image>
				<view class="mx_tit_text">优惠券明细</view>
			</view>
			<view class="list" v-for="(item, index) in arrList" :key="index">
				<view class="lista">
					<view class="red">
						<image class="red_img" src="../../static/yuan.png" v-show="item.status==1"></image>
						<image class="red_img" src="../../static/yuan2.png" v-show="item.status==2"></image>
						<view class="red_text" v-show="item.status==1">{{item.note}}</view>
						<view class="green_text" v-show="item.status==2">{{item.note}}</view>
					</view>
					<view><text v-show="item.status==1">+</text><text v-show="item.status==2">-</text>￥{{item.num}}</view>
				</view>
				<view class="listb">
					<view>
						{{item.createtime}}
					</view>
					<view>交易后余额：{{item.balance}}</view>
				</view>
			</view>
			<text class="loading-text">
					{{loadingType === 0 ? contentText.contentdown : (loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore)}}</text>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '../../components/uni-load-more/uni-load-more.vue';
	export default {
			components: {
				uniLoadMore
			},
			data() {
				return {
					key: '',
					arrList:[],//
					page:1,
					score:'',
					loadingType: 0,
					contentText: {
						contentdown: "上滑显示更多",
						contentrefresh: "正在加载...",
						contentnomore: "没有更多数据了"
					}
				};
			},
			onLoad(option) {
				this.initDat();//初始化数据
			},
			methods:{
				navTo(){
					uni.navigateTo({  
						url:'/pages/user/deposit'
					})  
				}, 
				navTo2(){
					uni.navigateTo({  
						url:'/pages/user/withdrawal'
					})  
				}, 
				//初始化数据
				initDat(){
					let that = this;
					this.$http.post('myscore',{page:1}).then(res => {
						let newsList =[];
						this.score = res.data.score;
						if(res.data.list.length>15){
							for(var i=0;i<15;i++){
								newsList.push(res.data.list[i]);
							}
							this.arrList = newsList;
						}else{
							this.arrList = res.data.list;
						}
						uni.hideNavigationBarLoading();
						uni.stopPullDownRefresh();//得到数据后停止下拉刷新
						
					})
				},
				//下拉刷新
				onPullDownRefresh() {
					this.page = 1;
					this.loadingType = 0
					this.initDat();
				},
				//触底加载
				onReachBottom() {
					this.page++;//每触底一次 page +1
					if (this.loadingType != 0) {//loadingType!=0;直接返回
						return false;
					}
					this.loadingType = 1;
					uni.showNavigationBarLoading();//显示加载动画
					this.$http.post('myscore',{page:this.page}).then(res => {
						if (res.data.list == null || res.data.list == '') {//没有数据
							this.loadingType = 2;
							uni.hideNavigationBarLoading();//关闭加载动画
							return;
						}
						this.arrList = this.arrList.concat(res.data.list);//将数据拼接在一起
						this.loadingType = 0;//将loadingType归0重置
						uni.hideNavigationBarLoading();//关闭加载动画
					})
								
				},
			}
		}
	
</script>

<style>
	/* .all{
		margin: 0;
		padding: 20upx 0;
		font-size: 30upx;
		letter-spacing: 5upx;
	}
	.list{
		margin: 0 20upx 20upx 20upx;
		height: 200upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.list1{
		background: url(../../static/youhuiquan.png);
		background-size: 100% 100%;
	}
	.list2{
		background: url(../../static/youhuiquan2.png);
		background-size: 100% 100%;
	}
	.list3{
		background: url(../../static/youhuiquan3.png);
		background-size: 100% 100%;
	}
	.list4{
		background: url(../../static/youhuiquan4.png);
		background-size: 100% 100%;
	}
	.list_left{
		width: 200upx;
		height: 200upx;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		color: #FFFFFF;
	}
	.bigs{
		font-size: 50upx;
	}
	.smalls{
		font-size: 18upx;
		padding: 10upx 0;
	}
	.list_con{
		width: 40%;
	}
	.titles{
		font-size: 35upx;
		font-weight: 600;
		width: 100%;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.times{
		font-size: 20upx;
		padding: 5upx;
	}
	.list_right{
		width: 25%;
		text-align: center;
	}
	.shiyong{
		width: 130upx;
		height: 60upx;
	}
	.riqi{
		font-size: 20upx;
		padding: 10upx 0;
	} */

	
.all{
		margin: 0;
		padding: 0;
		font-size: 30upx;
		letter-spacing: 5upx;
	}
	.top{
		padding: 20upx 0 30upx 0;
		color: #FFFFFF;
	}
	.topa{
		width: 94%;
		height: 210upx;
		background: url(../../static/qianbao_bg.png);
		background-size:100% 100%;
		margin-left: 3%;
	}
	.top_title{
		font-size: 25upx;
		position: relative;
		left: 60upx;
		top:30upx;
		width: 50%;
	}
	.price{
		text-align: center;
		padding: 20upx 0 25upx 0;
	}
	.pricea{
		font-size: 50upx;
	}
	.btns{
		display: flex;
		justify-content: center;
	}
	.btns view{
		padding: 6upx 50upx 8upx 50upx;
		margin: 0 20upx;
		font-size: 20upx;
		border-radius: 5px;
		border: 1upx solid #FFFFFF;
	}
	.btnsb{
		background: #FFFFFF;
		color: #FF5753;
	}
	.mingXi{
		padding: 20upx;
	}
	.mx_title{
		padding-bottom: 20upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.mx_tit_img{
		width: 30upx;
		height: 30upx;
	}
	.mx_tit_text{
		font-size: 25upx;
		text-indent: 30upx;
	}
	.list{
		width: 100%;
		padding: 15upx 0;
		margin: 10upx 0;
		box-shadow: 0 0 15upx 6upx #F5F3F4;
		border-radius: 10upx;
	}
	.lista,.listb{
		display: flex;
		justify-content: space-between;
		padding: 10upx 20upx;
	}
	.red{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.red_img{
		width: 10upx;
		height: 10upx;
	}
	.red_text{
		text-indent: 20upx;
		color: #F8564B;
		letter-spacing: 0!important;
	}
	.green_text{
		text-indent: 20upx;
		color: #7CD026;
		letter-spacing: 0!important;
	}
	.listb{
		color: gray;
		font-size: 28upx;
	}
	.times{
		margin-left: 30upx;
	}
	.green_text{
		color: #7ECF24;
	}
	.loading-text{
		height: 80upx;
		line-height: 80upx;
		font-size: 30upx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
</style>
